<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import http from '../../utils/http'

const route = useRoute()
const user = ref(null)
const isLoading = ref(true)

const getUser = async () => {
  try {
    const response = await http.get('/user/getUserById', {
      params: { id: route.params.id }
    })
    user.value = response.data
  } catch (error) {
    console.error('获取用户信息失败:', error)
  } finally {
    isLoading.value = false
  }
}

onMounted(() => {
  getUser()
})
</script>

<template>
  <div class="user-detail-container">
    <el-skeleton :loading="isLoading" animated>
      <template v-if="user">
        <el-card>
          <div class="user-profile">
            <el-avatar :size="100" :src="user.avatar" />
            <div class="profile-info">
              <h1>{{ user.username }}</h1>
              <div class="meta">
                <span>性别：{{ user.gender }}</span>
                <el-divider direction="vertical" />
                <span>粉丝：{{ user.fans }}</span>
                <el-divider direction="vertical" />
                <span>关注：{{ user.following }}</span>
              </div>
              <p class="signature">{{ user.signature }}</p>
            </div>
          </div>
        </el-card>

        <el-card class="user-content">
          <h2>详细信息</h2>
          <div class="detail-item">
            <label>注册时间：</label>
            <span>{{ user.registerTime }}</span>
          </div>
          <div class="detail-item">
            <label>所在地区：</label>
            <span>{{ user.location }}</span>
          </div>
          <div class="detail-item">
            <label>个人简介：</label>
            <p class="bio">{{ user.bio }}</p>
          </div>
        </el-card>
      </template>
    </el-skeleton>
  </div>
</template>

<style scoped>
.user-detail-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

.user-profile {
  display: flex;
  gap: 30px;
  align-items: center;
  padding: 20px;
  
  .profile-info {
    h1 {
      margin: 0 0 10px;
    }
    
    .meta {
      color: #666;
      margin: 12px 0;
    }
    
    .signature {
      color: #999;
      font-style: italic;
    }
  }
}

.user-content {
  margin-top: 20px;
  
  h2 {
    color: #333;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
  }
  
  .detail-item {
    margin: 15px 0;
    
    label {
      color: #666;
      min-width: 80px;
      display: inline-block;
    }
    
    .bio {
      color: #444;
      line-height: 1.6;
      margin-top: 8px;
    }
  }
}
</style>